<template>
  <el-menu v-if="treeMenu && treeMenu.length" :default-openeds="defaultOpened" :default-active="defaultActive" class="el-menu-vertical" background-color="#001637" text-color="#fff" active-text-color="#ffd04b" :unique-opened="true" :collapse="isCollapse" @open="handleOpen">
    <template v-for="(first, i) in treeMenu">
      <el-submenu v-if="first.children && first.children.length" :key="i" :index="String(first.id)">
        <template slot="title">
          <i class="el-icon-s-claim"></i>
          <span>{{ first.name }}</span>
        </template>
        <el-menu-item v-for="(second,j) in first.children" :key="second.resUrl" :index="second.resUrl" @click="jumpUrl(second)">
          {{ second.name }}
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :key="i" :index="first.resUrl" @click="jumpUrl(first)">
        <i class="el-icon-s-management"></i>
        <span>{{ first.name }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
import bus from '@/config/bus'
import { getStorage } from '@/config/utils'

export default {
  name: 'index',
  computed: {
    treeMenu () {
      return this.$store.getters.treeMenu || []
    }
  },
  data () {
    return {
      isCollapse: false,
      // 默认展开的菜单数组index
      defaultOpened: [],
      // 默认激活选中的二级菜单
      defaultActive: ''
    }
  },
  created () {
    bus.$on('isCollapse', () => {
      this.isCollapse = !this.isCollapse
    })
  },
  methods: {
    getFirstUrl (data) {
      if (data[0].children && data[0].children.length) {
        this.getFirstUrl(data[0].children)
      } else {
        this.$nextTick(() => {
          // 当前展开的菜单
          const parentId = data[0].parentId + ''
          this.$set(this.defaultOpened, 0, parentId)
        })
      }
    },
    jumpUrl (data) {
      if (data.resUrl && data.resUrl.indexOf('http') > -1) {
        this.$router.push({
          path: '/portrait',
          query: {
            url: data.resUrl
          }
        })
        this.$route.meta.title = data.name
      } else {
        console.log(data, 'dataurl');
        const reportStr = data.resUrl.split('/')
        // this.$store.commit('report/SET_REPORTTYPE', reportStr[reportStr.length - 1])
        localStorage.setItem('reportType', reportStr[reportStr.length - 1])
        // 前开发人员路由地址配置错误
        this.$router.push({
          path: data.resUrl,
          query: {
            name: data.name
          }
        })
      }
    },
    handleOpen (index) {
      sessionStorage.setItem('openIndex', index)
    }
  },
  beforeDestroy () {
    bus.$off('isCollapse')
  },
  watch: {
    treeMenu: {
      handler: function (val) {
        if (val.length) {
          if (val[0].resUrl) {
            this.defaultOpened = [String(val[0].resUrl)]
          } else {
            this.defaultOpened = [String(val[0].id)]
          }
        } else {
          this.defaultOpened = []
        }
      },
      deep: true
    },
    $route: {
      handler: function (val, oldVal) {
        if (this.treeMenu && this.treeMenu[0] && this.treeMenu[0].resUrl && this.treeMenu[0].resUrl.indexOf('http') > -1) {
          this.defaultActive = val.meta.activeMenu || String(this.treeMenu[0].resUrl)
        } else {
          this.defaultActive = val.meta.activeMenu || val.path
        }
      },
      immediate: true, // 第一次初始化渲染就可以监听到
      deep: true
    }
  }
}
</script>

<style lang="scss">
.el-menu{
  border-right: none;
}
.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-vertical.el-menu {
  .el-menu-item {
    width: 200px;
  }
}
</style>
